import { HIcon } from "@/components";
import { CustomerEconomicInfo, IDictionaries, UserInfo } from "@/service/type";
import { View, Text } from "@tarojs/components";
import { FC } from "react";
import { AtButton, AtDrawer } from "taro-ui";
import Form, { Field, FormInstance } from "rc-field-form";
import { validateErrorHandler } from "@/utils/validate";
import styles from "./index.module.less";
import { Keys } from "../../useData";

interface IProps {
  form: FormInstance<UserInfo>;
  userInfo: Partial<UserInfo>;
  onSave: (data: Partial<UserInfo>) => void;
  onShowDrawerPanel: (name: Keys, type: IDictionaries) => void;
}

const Job: FC<IProps> = (props) => {
  const { form, userInfo, onSave, onShowDrawerPanel } = props;

  function onHandleSave() {
    onSave({
      customerEconomicInfo: {
        ...userInfo.customerEconomicInfo,
        ...form.getFieldsValue(),
      },
    });
  }

  return (
    <View className={styles["job-wrapper"]}>
      <Form
        form={form}
        component="view"
        initialValues={{
          ...userInfo.customerEconomicInfo,
        }}
        onFinishFailed={validateErrorHandler}
        onFinish={onHandleSave}
      >
        <Field
          name="annualSalary"
          rules={[{ required: true, message: "请选择年薪" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel("annualSalary", IDictionaries.annualSalary)
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>年薪
              </View>
              <View>
                <Text>{form.getFieldValue("annualSalaryCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="profession"
          rules={[{ required: true, message: "请选择从事行业" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel("profession", IDictionaries.profession)
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>从事行业
              </View>
              <View>
                <Text>{form.getFieldValue("professionCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="jobType"
          rules={[{ required: true, message: "请选择岗位性质" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel("jobType", IDictionaries.jobType)
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>岗位性质
              </View>
              <View>
                <Text>{form.getFieldValue("jobTypeCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="organizationNature"
          rules={[{ required: true, message: "请选择单位性质" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel(
                  "organizationNature",
                  IDictionaries.organizationNature
                )
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>单位性质
              </View>
              <View>
                <Text>{form.getFieldValue("organizationNatureCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="title"
          rules={[{ required: true, message: "请选择职务" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() => onShowDrawerPanel("title", IDictionaries.title)}
            >
              <View>
                <Text className={styles["require"]}>*</Text>职务
              </View>
              <View>
                <Text>{form.getFieldValue("titleCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="vehicle"
          rules={[{ required: true, message: "请选择购车情况" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel("vehicle", IDictionaries.vehicle)
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>购车情况
              </View>
              <View>
                <Text>{form.getFieldValue("vehicleCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="house"
          rules={[{ required: true, message: "请选择购房情况" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() => onShowDrawerPanel("house", IDictionaries.house)}
            >
              <View>
                <Text className={styles["require"]}>*</Text>购房情况
              </View>
              <View>
                <Text>{form.getFieldValue("houseCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <Field
          name="familyStructure"
          rules={[{ required: true, message: "请选择家庭成员情况" }]}
          children={({ value }) => (
            <View
              className={styles["label-wrapper"]}
              onClick={() =>
                onShowDrawerPanel(
                  "familyStructure",
                  IDictionaries.familyStructure
                )
              }
            >
              <View>
                <Text className={styles["require"]}>*</Text>家庭成员
              </View>
              <View>
                <Text>{form.getFieldValue("familyStructureCn")}</Text>
                <HIcon type="youjiantou1" color="#999"></HIcon>
              </View>
            </View>
          )}
        ></Field>

        <AtButton className={styles["btn"]} onClick={form.submit}>
          保存
        </AtButton>
      </Form>
    </View>
  );
};

export default Job;
